<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>进度条 </title>
</head>
<style>
    #progress {
        position: relative;
        margin: auto;
        top: 200px;
        display: block;
        width: 200px;
        height: 20px;
        border-style: dotted;
        border-width: thin;
        border-color: darkgreen;
    }

    #filldiv {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 0px;
        height: 20px;
        background: blue;
    }

    #percent {
        position: absolute;
        top: 0px;
        left: 200px;

    }
</style>

<script>
   
    function jindutiao(){
    var num = 0;
    var timer = setInterval(function () {
        //Js不能直接获取非行内样式,需使用如下方式得到，但 IE<9不兼容
       // window.getComputedStyle(filldiv).width;
        // IE8及以下兼容 filldiv.currentStyle.width
        // 解决浏览器兼容问题 
       
        if (num == 200)
            clearInterval(timer);
        filldiv.style.width = num + "px";
        percent.innerHTML = parseInt(num / 200 * 100) + "%";
        var _width = getStyle(filldiv,"width");
        console.log(_width);
        num++;
    }, 30);
}
</script>
<script src="../common.js"></script>
<body onload="jindutiao()">
    <div id="progress">
        <div id="filldiv"></div>
        <span id="percent">0</span>
    </div>
</body>

</html>